iT邦幫忙

2021 iThome 鐵人賽

DAY 30
0
自我挑戰組

Scratch 3 從入門到精通系列 第 30

Day30 ( 高級 ) 顯示聲波圖形

  • 分享至 

  • xImage
  •  

顯示聲波圖形

教學原文參考:顯示聲波圖形

這篇文章會介紹,在 Scratch 3 裡偵測麥克風的聲音響度,並透過畫筆、函式、變數、重複、定位...等積木,在 Scratch 的舞台上顯示麥克風所收到的聲波圖形。

相關文章參考:聲音響度畫筆函式變數重複定位

角色設定

在角色編輯區,刪除貓咪角色,使用繪畫,建立一個「空白」的新角色 ( 參考:造型與繪圖 )。

因為待會不會出現角色,所以直接使用全空的空白角色。

Scratch 3 教學 - 顯示聲波圖形

積木程式原理

點擊空白角色,新增一個名為「y」的變數,和一個名為「list」的清單。

Scratch 3 教學 - 顯示聲波圖形

編輯當點擊綠旗時的程式:

  • 刪除 list 清單所有項目 ( 清空 list 內容 )。
  • 使用重複 480 次積木,將 480 個 0 加入 list ( 因為舞台寬度為 480 )。
  • 使用重複無限次積木。
  • 每次重複時,偵測麥克風聲音響度,將聲音響度加入 list ( 添加在最後一項 )
  • 每次重複時,刪除 list 的第一個項目,使 list 保持 480 個項目

Scratch 3 教學 - 顯示聲波圖形

從左側清單,建立一個名為「draw」函式,勾選「執行完畢再更新畫面」。

「執行完畢再更新畫面」的功能,可以讓函式內不需要等待的程式快速執行,加快畫面運行速度。

Scratch 3 教學 - 顯示聲波圖形

編輯 draw 函式,讓函式執行時,可以畫出 list 的內容。

  • 將角色定位到 (-240, 0) 畫面最左邊
  • 清除舞台所有筆跡、下筆。
  • 將變數 y 設為 0,作為取得 list 項目使用。
  • 使用重複 480 次積木,每次重複執行:
    • 將 y 增加 1
    • 將 x 改變 1,往右移動
    • 將 y 座標移動到 list 對應的位置 ( 正值在上方,乘以 -1 變成負值在下方 )
  • 停筆。

Scratch 3 教學 - 顯示聲波圖形

最後在點擊綠旗的積木裡,執行 draw 函式。

Scratch 3 教學 - 顯示聲波圖形

完成效果

完成後,點擊綠旗,對著麥克風發出聲音,就可以看見聲波圖形出現在舞台中。

Scratch 3 教學 - 顯示聲波圖形

範例解答

範例解答:顯示聲波圖形

延伸練習

如果已經熟悉了顯示聲波圖形的原理,還可以嘗試更多好玩的作法:

  • 加大聲波圖形的 y 軸高度 ( 解答 )

  • 增加聲波顏色,讓音量從小到大的顏色為黑、綠、黃、紅 ( 解答 )

    Scratch 3 教學 - 顯示聲波圖形

關於我

大家好,我是 OXXO,是個即將邁入中年的斜槓青年,如果對我有點興趣(笑,可以與我聯繫,一起來做點有玩又有創意的東西吧!


上一篇
Day29 ( 高級 ) 繪製正多角星形 ( 多線版 )
下一篇
Day31 ( 遊戲設計 ) 猴子接香蕉
系列文
Scratch 3 從入門到精通46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言